<template>
  <div class="current-root">
    <van-tabbar v-model="activeIndex" active-color="#ff9854">
      <template v-for="(item, index) in tabbarData" :key="index">
        <van-tabbar-item :to="item.path" icon="home-o">
          <span> {{ item.title }} </span>
<!--         具名插槽  -->
          <template #icon>
            <img v-if="activeIndex !== index" :src="getAssetUrl(item.image)" :alt="item.title">
            <img v-else :src="getAssetUrl(item.imageActive)" :alt="item.title">
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import {tabbarData} from "@/assets/data/tabbar";
import {getAssetUrl} from "@/utils/get_asset_img";
import {onMounted, ref} from "vue";

const activeIndex = ref(0)
onMounted(()=>{
  console.log('tab-bar onMounted')
})
</script>

<style lang="less" scoped>
// 当前组件根css类
.current-root {
  // 修改组件内部类，因为当前style 加上了 scoped 所以不能直接修改
  // 你可以 去掉 scoped，但是不推荐。 方法2: :deep(类)   也可以 /deep/
  :deep(.van-tabbar-item__icon) {
    font-size: 28px;
  }
  // 局部修改 当前组件生效
  //--van-tabbar-item-icon-size: 28px !important;
  img {
    height: 28px;
  }

}
</style>